<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="wrap">
        <div class="button-groups">
            <button class="edit">替换</button>
        </div>
        <ul class="list">
            <li class="first">01</li>
            <li>02</li>
            <li class="mid">03</li>
            <li>04</li>
            <li>05</li>
            <li class="last">06</li>
        </ul>
    </div>
</body>
<script>

    // 如何替换节点? (新的替换旧的)
    // parent.replaceChild(newNode,oldNode)  在父元素中,用一个节点(新的) 替换 另一个节点(页面中已存在的)



    var edit = document.querySelector(".edit");
    var ul = document.getElementsByClassName("list")[0];
    var mid = document.getElementsByClassName("mid")[0];

    // 需求: 点击新增按钮 创建一个li 放到.list的最后面
    edit.onclick = function () {
        // 如何创建一个li
        var li = document.createElement("li"); // 创建一个元素节点(li)

        // 被创建的li -> 正常的元素节点 -> 修改内容 添加属性 修改样式 绑定事件
        li.innerText = "我是被新增的li";
        li.setAttribute("class", "newLi");

        var list = ["red", "orange", "yellow", "green", "pink", "#6ff"];
        var index = Math.floor(Math.random() * list.length);
        li.style.backgroundColor = list[index];

        li.onclick = function () {
            alert(11111);
        }

        // 用新增的li替换mid

        if (mid) {
            ul.replaceChild(li, mid);
            mid = null;
        }
    }



</script>

</html>